<template>
  <view class="body">

        <uni-forms-item label="名称" required leftIcon="staff">
          <uni-easyinput v-model="baseData.tbAccount" placeholder="请输入你的名称(必填)" />
        </uni-forms-item>
        <uni-forms-item label="手机号" leftIcon="phone">
          <uni-easyinput v-model="baseData.phone" placeholder="请输入您的手机号" />
        </uni-forms-item>
		<uni-forms-item label="邮箱" leftIcon="phone">
		  <uni-easyinput v-model="baseData.phone" placeholder="请输入您的邮箱" />
		</uni-forms-item>
        <uni-forms-item label="文章名称" leftIcon="compose">
          <uni-easyinput v-model="baseData.worksName" placeholder="请为您的文章取个名字" />
        </uni-forms-item>
    <view class="formCss">
        <uni-forms-item label="图片" required leftIcon="camera">
          <button @click="select" type="default">上传</button><br>
          <view class="customImgCss">
              <image class="customImgSubCss" mode="widthFix" :src="path" />
              <image style="z-index: 1; position: absolute;left: 155px; top: 263px; width: 8%; height: 8%;" src="../../static/tabbar/lunbotu-02.jpg" mode=""></image>
              <ksp-cropper mode="free" :width="200" :height="200" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
          </view>
        </uni-forms-item>
        <uni-forms-item label="文章内容">
          <uni-easyinput type="textarea" v-model="baseData.remark" placeholder="请输入文章内容" />
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="addprodce" >提交文章</button>
    </view>
  </view>
</template>
<script>
  export default {
    onLoad:function(){

    },
    data() {
      return {
        url: "",
        path: "",
        baseData: {
          orderId: '',
          phone: '',
          tbAccount: '',
          worksName: '',
          textureIndex: 0,
          textures: ['塑料', '铁质'],
          sizeIndex: 0,
          sizes: ['18cm', '20cm'],
          remark: ''
        },
        sexs: [{
          text: "男",
          value: 0
        }, {
          text: "女",
          value: 1
        }]
      }
    },
    methods: {
      texturePicker(e) {
        this.baseData.textureIndex=e.detail.value
      },
      sizePicker(e){
        this.baseData.sizeIndex=e.detail.value
      },
      select() {
        uni.chooseImage({
          count: 1,
          success: (rst) => {
            // 设置url的值，显示控件
            this.url = rst.tempFilePaths[0];
          }
        });
      },
      onok(ev) {
        this.url = "";
        this.path = ev.path;
      },
      oncancel() {
        // url设置为空，隐藏控件
        this.url = "";
      },
      addprodce(){
        uni.navigateTo({
          url:"/pages/finish/essayfinish",
          
        })
      }
    }
  }
</script>

<style>
  .customImgSubCss{
    margin-left: 5px;
    margin-top: 5px;
    width: 330px;
    height: 330px;  
    border-radius: 50%;
  }
  .customImgCss{
    width: 340px;
    height: 340px;
    /* border: 2px #000000 solid; */
    border-radius: 50%;
    background-image: url(../../static/yz-image/yz.jpeg);
    background-size: 360px 360px;
    background-position:-10px -10px;
    z-index: 0;
  }
  .body {
    width: 100%;
    height: 100%;
  }

  .formCss {
    padding: 20px;
  }

  .textureCss{
    width: auto;
    height: 40px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
  }
</style>
